// 使用 `create-react-app` 创建的项目，可借助 `craco` 修改 webpack 配置。
// 能配置`@`路径别名，简化路径编写
const path = require('path')

// **主流适配方案**  常用基准尺寸是 `iPhone 6` 的屏宽`375px`  1rem = 37.5px
// 1. rem：设置 `html` 元素的 `font-size`（并最好将 `body` 元素的字体大小设为正常值）
// 2. vw： `1vw` 等于屏幕宽度的 `1%`  
// 3. vh: `1vh` 等于屏幕高度的 `1%`
// 本案例中采用 `vw` ，并用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 插件(该插件对 内联样式 style 不生效)在代码构建时将 `px 自动转为 vw`。
const pxToViewport = require('postcss-px-to-viewport')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src'),
      '@scss': path.resolve(__dirname, 'src/assets/styles')
    },
  },
   // react-scripts 4.0 的写法：
   style: {
    postcss: {
      plugins: [
        pxToViewport({ 
          // 视口宽度，就是基准尺寸，一般使用 375px（设计师的设计稿一般也按该宽度来设计）
          viewportWidth: 375 
        })
      ]
    }
  },

  // react-scripts 5.0 的写法：
  // style: {
  //   postcss: {
  //     mode: "extends",
  //     loaderOptions: {
  //       postcssOptions: {
  //         ident: "postcss",
  //         plugins: [pxToViewport({ viewportWidth: 375 })],
  //       },
  //     },
  //   },
  // },
}